<template>
    <button class="el-button" :class="styleClass" @click="handleClick" :disabled="disabled">
        <el-icon v-if="icon" :name="icon"></el-icon>
        <slot></slot>
    </button>
</template>

<script>
import { computed, defineComponent } from 'vue-demi'
export default defineComponent({
    name: 'el-button',
    props: {
        type: {
            // 控制按钮基本样式，[普通，成功，警告，错误]
            type: String,
            default: "primary",
            validator: value => {
                return ["primary", "success", "warning", "danger"].includes(value)
            },
        },
        disabled: {
            // 是否禁用按钮的点击功能，添加click事件触发无效
            type: Boolean,
            default: false
        },
        round: {
            // 是否圆角
            type: Boolean,
            default: false
        },
        icon:{
            // 提供 .el-icon-name 中的name值，即可产生前缀图标
            type:String,
            default:""
        }
    },
    setup(props,{emit}) {
        const styleClass = computed(() => {
            return {
                [`el-button--${props.type}`]: true,
                'is-disabled': props.disabled,
                'is-round': props.round
            }
        })
        const handleClick = ()=>{
            emit('click');
        }
        return {
            styleClass,
            handleClick
        }
    }
})
</script>

<style scoped lang="scss">
@import "./style.scss"
</style>